<script setup>


import {ref} from "vue";

const props = defineProps({
  userInfos: {
    type: Array,
    required: true,
  },
  pageNum: {
    type: Number,
    required: true,
  }, // 第几页
  pageSize: {
    type: Number,
    required: true,
  }, // 每页显示几条
  total: {
    type: Number,
    required: true,
  } // 总记录数
});

// 处理翻页，参数就是当前页码
const emit = defineEmits();
const handleCurrentChange = (pageNum) => {
  emit('change-page', pageNum);
};

const show4EditData = (row) => {
  emit('show4EditData', row);
};

//锁定用户
const deleteOwner = (row) => {
  emit('deleteOwner', row);
}

//==========================批量锁定===============================================================
const deleteIds = ref([])
const  handleselectionChange=val=>{
  deleteIds.value=val.map(item=>item.id)
  batchDelete()
};

const batchDelete=()=>{
  emit('batchDelete',deleteIds.value)
}
//===================================================================================================
const handleSizeChange = (pageSize) => {
  emit('change-page-size', pageSize);
};

</script>

<template>

  <el-table :data="userInfos" border fit style="width: 100%" @selection-change="handleselectionChange">
    <el-table-column type="selection" width="40"></el-table-column>
    <el-table-column prop="name" label="用户名"></el-table-column>
    <el-table-column prop="account" label="账号"></el-table-column>
    <el-table-column prop="roleName" label="职务"></el-table-column>
    <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
    <el-table-column prop="createdAccount" label="创建人"></el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
    <el-table-column prop="remark" label="备注" width="230">

      <template #default="scope">
        <el-tooltip effect="dark" placement="top" popper-class="custom-tooltip">
          <template #content>
            <div class="tooltip-content">{{ scope.row.remark }}</div>
          </template>
          <span class="remark-cell">{{ scope.row.remark }}</span>
        </el-tooltip>
      </template>

    </el-table-column>
    <el-table-column label="状态">
      <template #default="scope">
        <el-tag v-if="scope.row.status==0" type="warning" >未激活</el-tag>
        <el-tag v-else-if="scope.row.status==1" type="success" >激活</el-tag>
        <el-tag v-else type="danger">锁定</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed='right' label="操作" min-width="150">
      <template #default="scope">
        <el-button size="small" type="primary" @click="show4EditData(scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="deleteOwner(scope.row)">
          锁定
        </el-button>
      </template>
    </el-table-column>

  </el-table>



  <el-pagination
      style="margin-top: 20px"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"

  />
</template>

<style scoped>
.remark-cell {
  white-space: nowrap; /* 强制文本在一行内显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  display: inline-block; /* 确保宽度生效 */
  width: 200px; /* 设置固定宽度 */
  cursor: help; /* 更改鼠标指针形状为问号，提示用户有更多信息 */
}

/* 自定义工具提示内容样式 */
.tooltip-content {
  white-space: pre-wrap !important; /* 允许换行 */
  word-break: break-all !important; /* 确保长单词和URL也能换行 */
  max-width: 300px; /* 控制弹出框的最大宽度 */
}
</style>